<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>食物列表</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">食物列表</h1>
        
        <!-- 搜索条件 -->
        <div class="card mb-4">
            <div class="card-body">
                <form method="get" class="row g-3">
                    <div class="col-md-3">
                        <label for="name" class="form-label">食物名称</label>
                        <input type="text" class="form-control" id="name" name="name" th:value="${searchName}">
                    </div>
                    <div class="col-md-3">
                        <label for="category" class="form-label">食物类别</label>
                        <select class="form-select" id="category" name="category">
                            <option value="">全部</option>
                            <option value="蔬菜" th:selected="${searchCategory != null && searchCategory == '蔬菜'}">蔬菜</option>
                            <option value="水果" th:selected="${searchCategory != null && searchCategory == '水果'}">水果</option>
                            <option value="谷物" th:selected="${searchCategory != null && searchCategory == '谷物'}">谷物</option>
                            <option value="肉类" th:selected="${searchCategory != null && searchCategory == '肉类'}">肉类</option>
                            <option value="奶制品" th:selected="${searchCategory != null && searchCategory == '奶制品'}">奶制品</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="minCalories" class="form-label">最低卡路里</label>
                        <input type="number" class="form-control" id="minCalories" name="minCalories" th:value="${searchMinCalories}">
                    </div>
                    <div class="col-md-3">
                        <label for="maxCalories" class="form-label">最高卡路里</label>
                        <input type="number" class="form-control" id="maxCalories" name="maxCalories" th:value="${searchMaxCalories}">
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">搜索</button>
                        <a href="/foods/list" class="btn btn-secondary">重置</a>
                        <a href="/foods/add" class="btn btn-success float-end">添加食物</a>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 食物列表 -->
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>类别</th>
                                <th>卡路里(千卡/100g)</th>
                                <th>蛋白质(g/100g)</th>
                                <th>脂肪(g/100g)</th>
                                <th>碳水化合物(g/100g)</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="food : ${foods}">
                                <td th:text="${food.id}"></td>
                                <td th:text="${food.name}"></td>
                                <td th:text="${food.category}"></td>
                                <td th:text="${food.calories}"></td>
                                <td th:text="${food.protein}"></td>
                                <td th:text="${food.fat}"></td>
                                <td th:text="${food.carbohydrates}"></td>
                                <td>
                                    <a th:href="@{/foods/detail/{id}(id=${food.id})}" class="btn btn-sm btn-info">详情</a>
                                    <a th:href="@{/foods/edit/{id}(id=${food.id})}" class="btn btn-sm btn-warning">编辑</a>
                                    <button type="button" class="btn btn-sm btn-danger" 
                                            th:onclick="|deleteFood(${food.id})|">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页 -->
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p>当前页: <span th:text="${currentPage + 1}"></span></p>
                    </div>
                    <div>
                        <nav>
                            <ul class="pagination">
                                <li class="page-item" th:classappend="${currentPage == 0} ? 'disabled'">
                                    <a class="page-link" th:href="@{/foods/list(page=${currentPage - 1}, name=${searchName}, category=${searchCategory}, minCalories=${searchMinCalories}, maxCalories=${searchMaxCalories})}" 
                                       th:disabled="${currentPage == 0}">上一页</a>
                                </li>
                                <li class="page-item" th:each="i : ${#numbers.sequence(0, totalPages - 1)}"
                                    th:classappend="${i == currentPage} ? 'active'">
                                    <a class="page-link" th:href="@{/foods/list(page=${i}, name=${searchName}, category=${searchCategory}, minCalories=${searchMinCalories}, maxCalories=${searchMaxCalories})}"
                                       th:text="${i + 1}"></a>
                                </li>
                                <li class="page-item" th:classappend="${currentPage == totalPages - 1} ? 'disabled'">
                                    <a class="page-link" th:href="@{/foods/list(page=${currentPage + 1}, name=${searchName}, category=${searchCategory}, minCalories=${searchMinCalories}, maxCalories=${searchMaxCalories})}"
                                       th:disabled="${currentPage == totalPages - 1}">下一页</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <div>
                        <p>总记录数: <span th:text="${totalElements}"></span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function deleteFood(id) {
            if (confirm("确定要删除此食物吗？")) {
                fetch(`/api/foods/${id}`, {
                    method: 'DELETE'
                })
                .then(response => {
                    if (response.ok) {
                        alert("删除成功！");
                        window.location.reload();
                    } else {
                        alert("删除失败！");
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert("发生错误！");
                });
            }
        }
    </script>
</body>
</html>    